<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/jq练习.css">
</head>

<body>
    <div class="nav">
        <div class="item active">首页</div>
        <div class="item">国际</div>
        <div class="item">社会</div>
        <div class="item">军事</div>
        <div class="item">地区</div>
        <div class="item">民生</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        $(function () {
            var cat = $(`<div class="cat"></div>`).css({
                width: $(".item").width() + "px",
                height: $(".item").height() + "px",
                transition: "0.1s"
            });
            $(".nav").append(cat);
            $(".nav").on({
                click: function () {
                    if ($(this).hasClass("active")) return;
                    $(".active").removeClass("active");
                    cat.css({
                        left: $(".item").width() * $(this).index() + "px"
                    });
                    $(this).addClass("active");
                }
            }, ".item")
        });
    </script>
</body>

</html>